<template>
	<view class="auth-body">
		<image class="auth-card-bg" src="../../static/images/img_auth_card_bg@3x.png" mode="aspectFit"></image>
		<view class="auth-card">
			<view class="auth-user">
				<image class="auth-head"></image>
				<view class="auth-user-right">
					<label class="auth-name">{{user.name}}</label>
					<label class="auth-cardid">{{user.cardId}}</label>
				</view>
			</view>
			<view class="auth-tips">个人隐私信息安全保障中</view>
		</view>
		<view class="auth-item">
			<label class="auth-item-label">身份证件</label>
			<label class="auth-item-text">已上传</label>
			<label class="auth-item-arrow"></label>
		</view>
		<view class="auth-footer">
			<label class="auth-edit-btn" @click="onEditClick">账户更名</label>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				user: {}
			}
		},
		onLoad() {
			this.getUserInfo();
		},
		methods: {
			getUserInfo() {
				//调接口
				this.user = {
					name: "沈*燕",
					cardId: "5****************0",
					auth: true
				}
			}
		}
	}
</script>

<style>
	page {
		height: 100%
	}

	.auth-body {
		height: 100%;
		background-color: #F4F4F4;
		padding: 32rpx;
		position: relative;
	}

	.auth-card-bg {
		width: 100%;
		height: 304rpx;
	}

	.auth-card {
		position: absolute;
		top: 32rpx;
		width: 100%;
		display: flex;
		flex-flow: column;
	}

	.auth-user {
		display: flex;
		align-items: center;
		padding-top: 50rpx;
		padding-left: 32rpx;
		margin-bottom: 60rpx;
	}

	.auth-head {
		width: 108rpx;
		height: 108rpx;
		background: #CCCCCC;
		border: 2rpx solid #FFFFFF;
		border-radius: 50%;
		margin-right: 32rpx;
	}

	.auth-user-right {
		display: flex;
		flex-flow: column;
	}

	.auth-name {
		color: #FFFFFF;
		font-size: 34rpx;
	}

	.auth-cardid {
		font-size: 28rpx;
		color: #DDDDDD;
	}

	.auth-tips {
		background: url(../../static/images/icon_auth_tips@3x.png) left center no-repeat;
		background-size: 24rpx;
		color: #FFFFFF;
		font-size: 22rpx;
		padding-left: 30rpx;
		margin-left: 32rpx;
	}

	.auth-item {
		background-color: #FFFFFF;
		height: 86rpx;
		border-radius: 16rpx;
		margin-top: 32rpx;
		padding: 0 32rpx;
		display: flex;
		align-items: center;
	}

	.auth-item-label {
		flex: 1;
		font-size: 30rpx;
		color: #181818;
	}

	.auth-item-text {
		font-size: 28rpx;
		color: #ACACAC;
	}

	.auth-item-arrow {
		width: 32rpx;
		height: 32rpx;
		background: url(../../static/images/icon_jinru@3x.png) center no-repeat;
		background-size: 32rpx;
	}

	.auth-footer {
		position: fixed;
		bottom: 98rpx;
		font-size: 28rpx;
		color: #1371FF;
		text-align: center;
		width: 100%;
		left: 0;
	}
</style>
